<template>
  <div ref="chart" class="div-tiao"></div>
</template>

<script>
// 引入 ECharts 主模块
import * as echarts from 'echarts';

export default {
  name: 'BarChart',

  mounted() {

    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(this.$refs.chart);

    // 指定图表的配置项和数据
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }

}
</script>

<style scoped>
/* 你可以在这里添加一些CSS样式 */
.div-tiao {
  text-align: center;
  width: 900px;
  height: 500px;
}
</style>
